<template>
  <div class="appHeader">
    <div class="left" @click="backToIndex">
      <i class="ion ion-ios-arrow-back" style="font-size: 24px"></i>
    </div>
    <span>单词表</span>
  </div>
  <div id="appCapsule">
        <ul class="container">
            <li v-for="wordItem in wordinfo" 
            :style="{ height: wordItem.num*LineHeight + 'rem'}"
            data-bs-toggle="modal" data-bs-target="#wordDetail"
            @click="getWordInfo(wordItem.wid)"
            >
                <div class="word center" :style="{ height: wordItem.num*LineHeight + 'rem',lineHeight: wordItem.num*LineHeight + 'rem'}">{{ wordItem.word }}</div>
                <div class="info center" v-for="meaning in wordItem.meanings">
                    <div class="partOfSpeech center" :style="{ height: LineHeight + 'rem',lineHeight: LineHeight + 'rem'}">{{ meaning.part_of_speech }}</div>
                    <div class="definition" :style="{ height: LineHeight + 'rem',lineHeight: LineHeight + 'rem'}">{{ meaning.definition }}</div>
                </div>
            </li>
        </ul>

    </div>
    <!-- 单词详情模态框 -->
    <div class="modal fade action-sheet" id="wordDetail" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content" style="overflow-y: auto;max-height: 100vh;">
                <div class="modal-header">
                    <h2 class="modal-title" style="font-size: large;">单词详情</h2>
                    <a href="#" data-bs-dismiss="modal" style="font-size: large;">关闭</a>
                </div>
                <div class="modal-body">
                    <div class="card no_bgcolor">
                        <div class="card-header justify-content-start border-bottom-0">
                            <h1 class="font-weight-600 my-3" style="font-size: 45px">{{detail.word}}</h1>
                            <span class="text-primary font-size-16 root_word" v-if="isNaN(detail.root_word)">({{detail.root_word}})</span>
                        </div>
                        <div class="word-helper px-3">
                            <h3>
                            <div v-for="meaning_item in detail.meanings" class="meaning_container">
                                <span class="Part_of_speech mx-2">{{meaning_item['part_of_speech']}}</span>
                                <span class="Interpretation">{{meaning_item['definition']}}</span>
                            </div>
                            </h3>
                        </div>

                        <div class="card-body">
                            <div class="sentences my-5 box">
                                <div class="card-text border-primary" v-for="sentence_item in detail.sentences">
                                    {{sentence_item['content']}}
                                </div>
                                <!-- <div class="card-text border-primary">
                                    Ribuan orang terpaksa dipindahkan dari kediaman mereka.
                                </div> -->
                            </div>

                            <div class="other-info-box">
                                <div class="box" v-if="isNaN(detail.collocations)">
                                    <p class="mt-1 font-size-20">固定搭配:</p>
                                    <div class="card-body">
                                        <p v-for="collocation_item in detail.collocations">{{ collocation_item.content }}</p>
                                    </div>
                                </div>

                                <div class="box" v-if="isNaN(detail.relative_words)">
                                    <p class="mt-1 font-size-20">形近词辨析:</p>
                                    <div class="card-body">
                                        <p v-for="relative_word_item in detail.relative_words">{{ relative_word_item.content }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import {computed, defineComponent, onMounted, reactive, ref} from "vue";
import axios from "../utils/axios-plugin.js";

export default defineComponent({
  setup(){
    //回退
    const detail = reactive({
        word:'',
        root_word:'',
        meanings:[],
        sentences:[],
        collocations:[],
        relative_words:[]
    })
    function backToIndex(){
      this.$router.go(-1);
    }
    //简单信息
    const wordinfo = ref([]);
    const LineHeight = 2.1;
    
    //挂载时触发，填充单词的各个信息
    onMounted(()=>{
        axios.post('/word/wordList/1','i need word info')
        .then(response=>{
            wordinfo.value = response;
        })
    })
    function getWordInfo(wid){

        axios.get('/word/study/'+wid)
        .then(response=>{
            detail.word = response['word'];
            detail.root_word = response['root_word'];
            detail.meanings.splice(0,detail.meanings.length);
            detail.sentences.splice(0,detail.sentences.length);
            detail.collocations.splice(0,detail.collocations.length);
            detail.meanings.push(...response['meanings']);
            detail.sentences.push(...response['sentences']);
            detail.collocations.push(...response['collocations']);
        })
        .catch(error =>{
            console.log('请求失败',error);
        })
    }
    return{
      backToIndex,
      wordinfo,
      LineHeight,
      getWordInfo,
      detail,
    }
  }
  
})
</script>
<style scoped lang="scss">
body.dark-mode p{
  color: #fff;
}

.left{
    float: left;
}
span{
    width: 100%;
    text-align: center;
    font:700 20px '微软雅黑';
}
#appCapsule{
    overflow-y: auto;
    height: 100vh;
    background-color: #fff;
    // padding: 0;
}
.container{
    width: 100%;
    padding: 0;
    margin: 0;
}
.container li{
    list-style: none;
    border-bottom: 1px solid black;
}
.center{
    text-align: center;
    vertical-align: middle;
    line-height: height;
}
.word{
    width: 30%;
    float: left;
    font:700 18px '微软雅黑';
    color:black;
    // border:1px solid red;
}
.info{
    width:70%;
    height: 2rem;
    // line-height: 30px;
    float: left;
    // border:1px solid black;
}
.partOfSpeech{
    width: 20%;
    height: 100%;
    line-height: 30px;
    float: left;
    font:700 16px '微软雅黑';
    color:purple;
}
.definition{
    width: 80%;
    height: 100%;
    float: left;
    font:400 16px '微软雅黑';
    color:black;
    text-align: left;
}

.modal-header{
    position: sticky;
    top: 0;
    z-index: 999;
    background-color: #fff;
}
.modal-header a{
    position: absolute;
    top:0.7rem;
    right: 2rem;
}

//详情页样式

.sentences > .card-text {
    margin: 1.5rem 0;
    font-size: 20px;
}

.other-info-box{
  margin-top: 5rem;
}

.root_word{
  margin-left: 10px;
}
.meaning_container{
  margin-left: 20px;
}
.word_num{
  margin-left: 10px;
  position: relative;
  top: 8px;
}
.box{
    font-size: 20px;
    padding:0 0.5rem;
    word-wrap: break-word;
    border: rgba(192,192,192,0.6) solid 1px;
    background-color: rgba(255, 255, 255, .2);
    box-shadow: 0 2px 4px rgba(128, 128, 128, .8);
    color: #1d2024;
    border-radius: 3%;
    margin-top: 1rem;
  }
</style>